<script setup>
import ArticleItem from './ArticleItem.vue'
import { defineProps, defineEmits } from 'vue';
import { ElEmpty } from 'element-plus';

defineProps({
  articles: { type: Array, required: true, default: () => [] },
});
defineEmits(['toggleLike', 'addComment','view-article']);
</script>

<template>
  <div class="articles-list-container">
    <div v-if="articles && articles.length > 0" class="items-wrapper">
      <ArticleItem
          v-for="article in articles"
          :key="article.id"
          :article="article"
          @toggle-like="$emit('toggleLike', article.id)"
          @view-article="$emit('view-article', article)"
      />
    </div>
    <el-empty v-else description="还没有任何文章" />
  </div>
</template>

<style scoped>
.articles-list-container {
  display: flex;
  flex-direction: column;
  gap: 1px; /* 用1px的gap模拟分割线效果 */
  background-color: #e4e7ed; /* 分割线颜色 */
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  overflow: hidden;
}
.items-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
</style>